<script>
import {getListByType, getPageList} from "@/api/aihuman/humanAssets/soundType";

export default {
  name: "humanSoundDialog",
  data() {
    return {
      dialogVisible: false,
      activeName: '',
      tabsList: [],
      tableData: [],
      costumesType: '',
      paging: {
        total: 0,
        page: 1,
        size: 10
      },
      selectedList: []
    }
  },
  methods: {
    handleTab({name}) {
      console.log(name);
      this.paging.page = 1
      this.tableData = []
      this.getList()
    },
    getList() {
      this.$nextTick(async () => {
        let params = {
          soundGroupId: this.activeName,
          pageNo: this.paging.page,
          actionType: this.costumesType,
          pageSize: this.paging.size,
          status: 0
        }
        const {data} = await getPageList(params)
        this.tableData = data.data.records
        this.paging.total = data.data.total


        if (this.selectedList.length === 0) return

        if (this.$refs.table) {
          // console.log(121212)

          let temp = data.data.records.find(item => item.id === this.selectedList[0].id)
          console.log(temp ,'121212=');
          this.$refs.table.setCurrentRow(data.data.records.find(item => item.id === this.selectedList[0].id))
        }
      })
    },
    async getType() {
      const {data} = await getListByType({type: 2})
      this.tabsList = data.data
      this.activeName = this.tabsList[0].id

      this.getList()

      // this.$refs.listRef.page.currentPage = 1
      // this.$refs.listRef.groupId = this.activeName
      // await this.$refs.listRef.getList()
    },
    openDialog(selectData) {
      this.dialogVisible = true
      this.getType()
      if (selectData.length === 0) return
      this.selectedList = selectData
    },
    handleSelectionChange(val) {
      this.selectedList = [val]
    },
    submitData() {
      if (this.selectedList.length === 0 || this.selectedList.length > 1) {
        this.$message.error('请选择一条数据')
        return false
      }
      this.$emit('get-select', this.selectedList)
      this.dialogVisible = false
    }
  }
}
</script>

<template>
  <huilan-dialog
    title="选择声音"
    :visible.sync="dialogVisible"
    width="60%"
    append-to-body
  >

    <el-tabs v-model="activeName" @tab-click="handleTab">
      <el-tab-pane
        v-for="(item) in tabsList"
        :key="item.id"
        :label="item.groupName"
        :name="item.id">
      </el-tab-pane>
    </el-tabs>

    <el-table
      :data="tableData"
      border
      ref="table"
      width="100%"
      highlight-current-row
      :header-cell-style="{background: '#fafafa'}"
      row-key="id"
      @current-change="handleSelectionChange"
      style="width: 100%">

      <el-table-column
        prop="name"
        label="ID"
        #default="{row}"
      >
        <i v-if="selectedList.length>0 && selectedList[0].soundTypeCode === row.soundTypeCode"
           class="el-icon-success icon-select"></i>
        <i v-else class="el-icon-success" style="color: #ccc;"></i>
        {{ row.soundTypeCode }}
      </el-table-column>
      <el-table-column
        prop="soundTypeName"
        label="名称">
      </el-table-column>
    </el-table>

    <div style="display: flex; justify-content: flex-end;padding: 10px 0">
      <el-pagination
        background
        @size-change="getList"
        @current-change="getList"
        :current-page.sync="paging.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="paging.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total">
      </el-pagination>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitData">确 定</el-button>
    </template>
  </huilan-dialog>
</template>

<style scoped lang="scss">
.icon-select {
  color: #00a680;
}
</style>
